<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-teal-50 pt-32 pb-16">
    <div class="container mx-auto px-4 md:px-8">
      <h1 class="text-4xl font-bold text-blue-800 mb-12 text-center md:text-left">资源列表</h1>
      
      <div class="flex flex-col md:flex-row gap-8">
        <!-- 左侧分类栏 - 固定定位实现 -->
        <div class="w-full md:w-64 flex-shrink-0">
          <div class="sticky top-32 bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="bg-gradient-to-r from-blue-600 to-teal-500 px-6 py-4 text-white font-semibold">
              资源分类
            </div>
            <div class="p-2 max-h-[calc(100vh-20rem)] overflow-y-auto">
              <button
                v-for="category in categories"
                :key="category.id"
                :class="[selectedCategory === category.id ? 'bg-blue-100 text-blue-700 border-l-4 border-blue-500' : 'hover:bg-gray-50', 'w-full text-left px-4 py-3 rounded-lg transition-all duration-300']"
                @click="selectCategory(category.id)"
              >
                <div class="flex items-center gap-3">
                  <div :class="category.iconClass + ' text-lg'"></div>
                  <span>{{ category.name }}</span>
                  <span class="ml-auto bg-blue-50 text-blue-600 text-xs px-2 py-1 rounded-full">{{ category.count }}</span>
                </div>
              </button>
            </div>
          </div>
        </div>

        <!-- 右侧资源内容 -->
        <div class="flex-1">
          <!-- 资源类型过滤器 -->
          <div class="bg-white rounded-xl shadow-md p-4 mb-8">
            <div class="flex flex-wrap gap-2">
              <button
                v-for="type in resourceTypes"
                :key="type.id"
                :class="[selectedType === type.id ? 'bg-blue-600 text-white' : 'bg-blue-50 text-blue-700 hover:bg-blue-100', 'px-4 py-2 rounded-full text-sm transition-all duration-300']"
                @click="selectType(type.id)"
              >
                {{ type.name }}
              </button>
            </div>
          </div>

          <!-- 资源内容列表 -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div
              v-for="resource in filteredResources"
              :key="resource.id"
              class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1"
            >
              <div class="h-40 bg-gray-100 relative">
                <img :src="resource.image" alt="{{ resource.title }}" class="w-full h-full object-cover"/>
                <div class="absolute top-3 right-3 bg-blue-600 text-white text-xs px-2 py-1 rounded-full">
                  {{ getTypeName(resource.type) }}
                </div>
              </div>
              <div class="p-5">
                <h3 class="text-xl font-semibold text-gray-800 mb-2">{{ resource.title }}</h3>
                <p class="text-gray-600 text-sm mb-4 line-clamp-2">{{ resource.description }}</p>
                <div class="flex justify-between items-center">
                  <span class="text-blue-600 text-sm">{{ resource.categoryName }}</span>
                  <a href="{{ resource.url }}" target="_blank" class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1">
                    查看资源 <i class="fa fa-external-link text-xs"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-if="filteredResources.length === 0" class="bg-white rounded-xl shadow-md p-12 text-center">
            <div class="text-gray-400 text-5xl mb-4"><i class="fa fa-folder-open"></i></div>
            <h3 class="text-xl font-medium text-gray-700 mb-2">暂无资源</h3>
            <p class="text-gray-500">请尝试选择其他分类或资源类型</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 分类数据
const categories = ref([
  { id: 'all', name: '全部资源', iconClass: 'fa fa-th-large', count: 48 },
  { id: 'documents', name: '文档资料', iconClass: 'fa fa-file-text-o', count: 12 },
  { id: 'templates', name: '模板资源', iconClass: 'fa fa-file-code-o', count: 8 },
  { id: 'images', name: '图片素材', iconClass: 'fa fa-image', count: 15 },
  { id: 'videos', name: '视频资源', iconClass: 'fa fa-video-camera', count: 5 },
  { id: 'audio', name: '音频资源', iconClass: 'fa fa-music', count: 3 },
  { id: 'code', name: '代码片段', iconClass: 'fa fa-code', count: 10 },
  { id: 'tools', name: '开发工具', iconClass: 'fa fa-wrench', count: 7 },
  { id: 'books', name: '技术书籍', iconClass: 'fa fa-book', count: 12 },
  { id: 'courses', name: '在线课程', iconClass: 'fa fa-graduation-cap', count: 9 },
  { id: 'plugins', name: '插件扩展', iconClass: 'fa fa-puzzle-piece', count: 6 },
  { id: 'others', name: '其他资源', iconClass: 'fa fa-ellipsis-h', count: 4 },
]);

// 资源类型数据
const resourceTypes = ref([
  { id: 'all', name: '全部类型' },
  { id: 'free', name: '免费' },
  { id: 'premium', name: '付费' },
  { id: 'internal', name: '内部资源' },
  { id: 'external', name: '外部链接' },
]);

// 模拟资源数据
const resources = ref([
  { id: 1, title: 'Vue3 开发文档', description: '完整的Vue3框架开发文档，包含组件、API和高级特性', category: 'documents', categoryName: '文档资料', type: 'free', image: 'https://picsum.photos/seed/resource1/400/300', url: '#' },
  { id: 2, title: 'React组件模板', description: '企业级React组件开发模板，包含常用组件和样式', category: 'templates', categoryName: '模板资源', type: 'premium', image: 'https://picsum.photos/seed/resource2/400/300', url: '#' },
  { id: 3, title: 'UI设计素材包', description: '高质量UI设计素材包，包含图标、插图和设计系统', category: 'images', categoryName: '图片素材', type: 'premium', image: 'https://picsum.photos/seed/resource3/400/300', url: '#' },
  { id: 4, title: 'JavaScript高级教程', description: '深入学习JavaScript高级特性和设计模式', category: 'courses', categoryName: '在线课程', type: 'free', image: 'https://picsum.photos/seed/resource4/400/300', url: '#' },
  { id: 5, title: 'Node.js后端框架', description: '轻量级Node.js后端开发框架，包含路由和中间件', category: 'code', categoryName: '代码片段', type: 'free', image: 'https://picsum.photos/seed/resource5/400/300', url: '#' },
  { id: 6, title: 'Docker实战指南', description: 'Docker容器化部署实战指南，包含常见问题解决', category: 'books', categoryName: '技术书籍', type: 'internal', image: 'https://picsum.photos/seed/resource6/400/300', url: '#' },
]);

// 选中状态
const selectedCategory = ref('all');
const selectedType = ref('all');

// 选择分类
const selectCategory = (categoryId) => {
  selectedCategory.value = categoryId;
};

// 选择资源类型
const selectType = (typeId) => {
  selectedType.value = typeId;
};

// 过滤资源
const filteredResources = computed(() => {
  return resources.value.filter(resource => {
    const categoryMatch = selectedCategory.value === 'all' || resource.category === selectedCategory.value;
    const typeMatch = selectedType.value === 'all' || resource.type === selectedType.value;
    return categoryMatch && typeMatch;
  });
});

// 获取资源类型名称
const getTypeName = (typeId) => {
  const type = resourceTypes.value.find(t => t.id === typeId);
  return type ? type.name : '';
};
</script>

<style scoped>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
</style>